<template>
  <!-- Container -->
  <div
    class="flex animate__animated animate__fadeIn duration-700 overflow-hidden flex-col sm:flex-row items-center justify-center dark:bg-gray-900 shadow-lg w-full max-w-4xl h-screen"
  >
    <!-- Left Section -->
    <div
      class="sm:flex sm:w-1/2 items-center justify-center text-white rounded-l-lg p-1 sm:p-1"
    >
      <div class="text-center">
        <h1
          class="text-xl sm:text-2xl font-bold dark:text-zinc-100 mb-1 text-gray-800"
        >
          欢迎加入我们的社区!
        </h1>
        <p class="text-sm sm:text-base dark:text-zinc-100 text-gray-900">
          注册成为网站的一员,第一时间为你推送新文章!
        </p>
      </div>
    </div>
    <!-- Right Section -->
    <div class="w-full sm:w-2/5 p-4 sm:p-8">
      <div class="text-center">
        <h2
          class="text-lg sm:text-xl mb-2 font-bold text-gray-900 dark:text-white"
        >
          注册
        </h2>
      </div>
      <form @submit.prevent="handleRegister" class="space-y-3">
        <div>
          <input
            type="text"
            v-model="username"
            placeholder="用户名"
            class="w-full px-3 py-2 border rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-900 dark:text-white text-sm sm:text-base"
            required
          />
        </div>
        <div>
          <input
            type="email"
            v-model="email"
            placeholder="QQ邮箱"
            class="w-full px-3 py-2 border rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-900 dark:text-white text-sm sm:text-base"
            required
          />
        </div>
        <div>
          <input
            type="password"
            v-model="password"
            placeholder="密码"
            class="w-full px-3 py-2 border rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-900 dark:text-white text-sm sm:text-base"
            required
          />
        </div>
        <div>
          <input
            type="password"
            v-model="confirmPassword"
            placeholder="确认密码"
            class="w-full px-3 py-2 border rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-900 dark:text-white text-sm sm:text-base"
            required
          />
        </div>
        <div class="flex items-center space-x-2 sm:space-x-4">
          <input
            type="text"
            v-model="verificationCode"
            placeholder="验证码"
            class="flex-1 px-2 py-2 border rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-900 dark:text-white text-sm sm:text-base"
            required
          />
          <button
            type="button"
            @click="sendVerificationCode"
            :disabled="isSending"
            class="py-2 px-3 bg-blue-500 text-white rounded-sm text-xs sm:text-sm hover:bg-blue-600 transition disabled:opacity-50"
          >
            {{ isSending ? '发送中...' : '发送验证码' }}
          </button>
        </div>
        <button
          type="submit"
          class="w-full bg-green-500 text-white py-2 rounded-sm text-sm sm:text-base hover:bg-green-600 transition"
        >
          注册
        </button>
      </form>
      <div
        class="flex justify-between mt-3 text-xs sm:text-sm text-gray-600 dark:text-gray-400"
      >
        <a
          class="hover:underline cursor-pointer"
          @click="$router.push('/profile')"
          >已有账户? 去登录</a
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const username = ref('')
const email = ref('')
const verificationCode = ref('')
const password = ref('')
const confirmPassword = ref('')
const isSending = ref(false)

const sendVerificationCode = async () => {
  if (!/^[a-zA-Z0-9._%+-]+@qq\\.com$/.test(email.value)) {
    alert('请输入有效的 QQ 邮箱地址')
    return
  }
  isSending.value = true
  try {
    // 模拟发送验证码的请求
    await new Promise((resolve) => setTimeout(resolve, 2000)) // 模拟 2 秒延迟
    alert('验证码已发送，请检查您的邮箱')
  } catch (error) {
    alert('发送验证码失败，请稍后再试')
  } finally {
    isSending.value = false
  }
}

const handleRegister = () => {
  if (password.value !== confirmPassword.value) {
    alert('密码和确认密码不一致')
    return
  }
  if (!verificationCode.value) {
    alert('请输入验证码')
    return
  }
  // 模拟注册逻辑
  alert('注册成功！')
  router.push('/home')
}
</script>

<style></style>
